﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jeDate日期控件</title>
<script type="text/javascript" src="jedate/jedate.js"></script>
<link type="text/css" rel="stylesheet" href="jedate/skin/jedate.css">
<style>
.bodys{ padding:50px 0 0 50px;}
.datainp{ width:200px; height:30px; border:1px #ccc solid;}
.datep{ margin-bottom:40px; line-height:24px; margin-right:15px;}
</style>
</head>

<body class="bodys">
<div style="width:100%; margin-bottom:50px; overflow:hidden;">
<ul>
<li class="datep"><a href="http://www.jayui.com/jedate/">详细日期控件API</a></li>
<li class="datep" style="width:700px;">jeDate除了包含初始化日期加减N、日期标注点、输入框可以直接输入时间、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。<span class="green b">您可以免费将她用于任何个人项目。但是不能去除头部信息。</span>  QQ群：516754269 </li>
<span style="color: red">此为部分个例展示，更多请看</span> <a href="http://www.jayui.com/jedate/">详细日期控件API</a>。<br/>
</li>
<!--<input type="checkbox" formatval="YYYY-MM-DD" onclick="thatcheckbox(this)">-->
    <li class="datep"><input class="datainp" id="inyear" type="text" placeholder="YYYY" value=""  readonly></li>
    <li class="datep"><input class="datainp" id="inpstart" type="text" placeholder="开始日期" value=""  readonly></li>
    <li class="datep"><input class="datainp" id="inpend" type="text" placeholder="结束日期"   readonly></li>
    <li class="datep"><input class="datainp" id="date01" type="text" placeholder="YYYY-MM-DD hh:mm:ss" value=""  readonly></li>
    <li class="datep"><input class="datainp" id="date02" type="text" placeholder="YYYY-MM-DD hh:mm" value=""  readonly></li>
    <li class="datep"><input class="datainp" id="date03" type="text" placeholder="YYYY-MM-DD"  readonly></li>
    <li class="datep"><input class="datainp" id="date04" type="text" placeholder="YYYY-MM"  readonly></li>
    <li class="datep"><input class="datainp" id="date05" type="text" placeholder="hh:mm:ss"  readonly></li>
    <li class="datep"><input class="datainp" id="date06" type="text" placeholder="hh:mm"  readonly></li>
</ul>
<div class="discls" style="float:left;margin-right:5px;"></div>
<div class="discls" style="float:left;margin-right:5px;"></div>
</div>

<script type="text/javascript">
    jeDate({
        dateCell: '#inyear',
        isClear:true,
        fixed:false,
        minDate:'2013-06-30 23:59:59',
        maxDate:'2017-06-16 23:59:59',
        format: 'YYYY'
    });
    var start = {
        dateCell: '#inpstart',
        skinCell:"jedategreen",
        format: 'YYYY-MM-DD hh时mm分ss秒',
        minDate: jeDate.now(0), //设定最小日期为当前日期
        isinitVal:true,
        festival:true,
        ishmsVal:false,
        maxDate: '2099-06-30 23:59:59', //最大日期
        choosefun: function(elem,datas){
            //console.log(datas)
            end.minDate = datas; //开始日选好后，重置结束日的最小日期
        }
    };
    var end = {
        dateCell: '#inpend',
        skinCell:"jedatered",
        format: 'YYYY年MM月DD日 hh:mm:ss',
        minDate: jeDate.now(0), //设定最小日期为当前日期
        festival:true,
        maxDate: '2099-06-16 23:59:59', //最大日期
        choosefun: function(elem,datas){
            //console.log(end.minDate)
            start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
        }
    };
    jeDate(start);
    jeDate(end);


    jeDate({
        dateCell: '#date01',
        isClear:true,
        format: 'YYYY年MM月DD日 hh:mm:ss'
    });
    jeDate({
        dateCell: '#date02',
        isinitVal:true,
        format: 'YYYY-MM-DD hh:mm'
    });
    jeDate({
        dateCell: '#date03',
        format: 'YYYY-MM-DD'
    });
    jeDate({
        dateCell: '#date04',
        format: 'YYYY-MM'
    });
    jeDate({
        dateCell: '#date05',
        isinitVal:true,
        format: 'hh:mm:ss'
    });
    jeDate({
        dateCell: '#date06',
        format: 'hh:mm'
    });

</script>

</body>
</html>
